<template>
  <div class="general_statistics">
    <div class="selectSite">
      <getSite @handleChange="handleChange" ref="getSite_ref"></getSite>
    </div>
    <div class="general_statistics_detail">
      <section class="todayAmountStr-box">
        <h3>网站信息</h3>
        <div class="todayAmountStr-content">
          <ul class="today_ul" v-for="(item, index) in   listData  " :key="index">
            <li>{{ item.title }}</li>
            <li><span>{{ item.today_label }}</span><span :style="{ color: item.color }">{{ item.todayAmountStr }}</span>
            </li>
            <li><span>{{ item.yesterday_label }}</span><span class="yesterdayAmountStr-wrap">{{ item.yesterdayAmountStr
            }}</span></li>
            <li><span>{{ item.high_label }}</span><span>{{ item.allTimeHighAmountStr }}</span></li>
            <li v-if="index != 3"><span>{{ item.sum_label }}</span><span>{{ item.cumulativeAmount }}</span></li>
          </ul>
        </div>
      </section>
      <div class="general_statistics_charts">
        <div class="scrollSection">
          <div class="charts">
            <div class="pv_uvlists">
              <a-tabs v-model:activeKey="activeKey" @change="handleChange">
                <a-tab-pane key="1" tab="今日流量"></a-tab-pane>
                <a-tab-pane key="2" tab="流量贡献值"></a-tab-pane>
              </a-tabs>
            </div>
            <section class="todayAmountStr-box listData_today" v-if="activeKey == '1'">
              <h3>网站信息</h3>
              <div class="todayAmountStr-content">
                <ul class="today_ul " v-for="(item, index) in listData_today" :key="index">
                  <li>{{ item.title }}
                    <a-tooltip placement="right" v-if="item.tips">
                      <template #title>
                        <span>{{ item.tips }}</span>
                      </template>
                      <span class="iconfont icon-hint1"></span>
                    </a-tooltip>
                  </li>
                  <li><span>{{ item.today_label }}</span>
                    <span :style="{ color: item.color }">{{ item.noSum ?
                      transverterMss(item.todayAmountStr || 0) : item.todayAmountStr
                    }}
                    </span>
                  </li>
                  <li><span>{{ item.yesterday_label }}</span>
                    <span class="yesterdayAmountStr-wrap">
                      {{ item.noSum ? transverterMss(item.yesterdayAmountStr || 0) :
                        item.yesterdayAmountStr }}
                    </span>
                  </li>
                  <li><span>{{ item.high_label }}</span>
                    <span>{{ item.noSum ?
                      transverterMss(item.allTimeHighAmountStr || 0) : item.allTimeHighAmountStr }}
                    </span>
                  </li>

                  <li v-if="!item.noSum"><span>{{ item.sum_label }}</span>
                    <span>
                      {{ item.cumulativeAmount }}
                    </span>
                  </li>
                </ul>
              </div>
            </section>
            <div class="generalOnlinePie_line" v-else>
              <div class="generalOnlinePie_line_left">
                <div class="totalView">总浏览量：<span>{{ totalView }}</span> </div>
                <div id="generalOnlinePie"></div>
              </div>
              <div id="generalOnline" v-show="pieType == 2 || pieType == 3"></div>

            </div>
          </div>
        </div>
      </div>
      <div class="general_tendency_visitors">
        <div class="timeSelect item">
          <!-- 所属时间模块部分 -->
          <commonDatePick :formData='formData' @select-type="selectType" @selectTimeChange="selectTimeChange" ref="commonDatePick_ref"></commonDatePick>
        </div>
        <div class="option-content">
          <!-- <a-button :style="{ 'margin-right': '8px' }" class="addButton" type="primary"
            @click="handleChange">搜索</a-button> -->
        </div>
      </div>
      <div class="charts_tendency_visitors">
        <div class="charts_tendency">
          <div class="pv_uvlists">
            <div class="tendency_statistics_item">
              <div class='tendency_statistics_title'> 趋势图</div>
              <div class="selectTypes">
                <span>显示指标：</span>
                <a-radio-group v-model:value="showOptionsSelected"
                  :options="showOptions.map((item: any) => ({ value: item.value, label: item.label }))"
                  @change="tendencyChange" />
              </div>
            </div>
          </div>
          <div id="tendencyOnline"></div>
          <div class="more" @click="toDetail('flowStatictics/tendency')"><a>查看更多</a></div>
        </div>
        <div class="charts_visitors">
          <div class='newOldvisiter'> 新老访客 <div class="tips">
              <a-tooltip placement="right">
                <template #title>
                  <span>一天的独立访客中，首次访问您网站的访客记为新访客；再次访问记为老访客。助您了解网站的访客构成以及不同渠道带来的访客情况，新老访客关注的差异对比。</span>
                </template>
                <span class="iconfont icon-hint1"></span>
              </a-tooltip>
            </div>
          </div>
          <div class="halfCharts">
            <div id="generalnewVisitor"></div>
            <div id="generaloldVisitor"></div>
          </div>
          <div class='visitor-wrap'>
            <div class="visitor">
              <div class="visitor-box">
                <p><span><strong></strong>浏览量</span><span>{{ visitorObj.newVisitorsDto.pvNum }}</span></p>
                <p><span><strong></strong>访客数</span><span>{{ visitorObj.newVisitorsDto.uvNum }}</span></p>
                <p><span><strong></strong>跳出率</span><span v-if="visitorObj.newVisitorsDto.bounceRate">{{
                  visitorObj.newVisitorsDto.bounceRate +
                  '%' }}</span>
                </p>
                <p><span><strong></strong>平均访问时长</span><span>{{
                  transverterMss(visitorObj.newVisitorsDto.averageVisitLength || 0) }}</span>
                </p>

              </div>

            </div>
            <div class="visitor">
              <div class="visitor-box">
                <p><span><strong></strong>浏览量</span><span>{{ visitorObj.oldVisitorsDto.pvNum }}</span></p>
                <p><span><strong></strong>访客数</span><span>{{ visitorObj.oldVisitorsDto.uvNum }}</span></p>
                <p><span><strong></strong>跳出率</span><span v-if="visitorObj.oldVisitorsDto.bounceRate">{{
                  visitorObj.oldVisitorsDto.bounceRate + '%' }}</span>
                </p>
                <p><span><strong></strong>平均访问时长</span><span>{{
                  transverterMss(visitorObj.oldVisitorsDto.averageVisitLength || 0) }}</span></p>
              </div>
            </div>
          </div>
          <div class="more" @click="toDetail('visitorStatistics/visitor')"><a>查看更多</a></div>
        </div>
      </div>
      <div class="top10">
        <div class="visitor10">
          <div class='top_title'> Top10来源网站</div>
          <div class="more" @click="toDetail('sourceStatistics/index')"><a>查看更多</a></div>
          <!-- 表格展示部分 -->
          <baseTable :columns="columns.generalData.sourceData" :dataSource="configData_visit.records" :isSelect="true"
            :scroll="scroll" ref="sensitiveBaseTables" :isShowPagination="isShowPagination" :rowSelection="1"
            :total="configData_visit.total">
            <template #bodyCell="{ column, text, record }">
              <template v-if="column.ellipsis">
                <table-tool-tip :text="text" :column="column"></table-tool-tip>
              </template>
              <template v-if="column.dataIndex == 'sourceUrl'">
                <a class="sourceUrl">{{ text }}</a>
              </template>
            </template>
          </baseTable>
        </div>
        <div class="entery10">
          <div class='top_title'> Top10入口网站</div>
          <div class="more" @click="toDetail('interviewer/entrance')"><a>查看更多</a></div>
          <!-- 表格展示部分 -->
          <baseTable :columns="columns.generalData.entryData" :dataSource="configData_entry.records" :isSelect="true"
            :scroll="scroll" ref="sensitiveBaseTables" :isShowPagination="isShowPagination" :rowSelection="1"
            :total="configData_entry.total">
            <template #bodyCell="{ column, text, record }">
              <template v-if="column.ellipsis">
                <table-tool-tip :text="text" :column="column"></table-tool-tip>
              </template>
              <template v-if="column.dataIndex == 'sourceUrl'">
                <a class="sourceUrl">{{ text }}</a>
              </template>
            </template>
          </baseTable>
        </div>

      </div>
      <div class="areaOnlinePie_line">
        <div class="area_bar">
          <div class='top_title'> 地域分布</div>
          <div id="area_bar"></div>
        </div>
        <div class="statictics_table">
          <!-- 表格展示部分 -->
          <baseTable :columns="columns.generalData.areaData" :dataSource="configData_area.records" :isSelect="true"
            :scroll="scroll" ref="sensitiveBaseTables" :isShowPagination="isShowPagination" :rowSelection="1"
            :total="configData_area.total" :indentSize="60">
            <template #bodyCell="{ column, text, record }">
              <template v-if="column.ellipsis">
                <table-tool-tip :text="text" :column="column"></table-tool-tip>
              </template>
            </template>
          </baseTable>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, nextTick, onMounted, onBeforeMount, onUnmounted, reactive, watch, computed } from "vue";
import request from "@/api/index";
import { initEcharts } from "@/components/echarts/index";
import { optionpieHalfDonut, optionLine, optionArea, optionsPie, optionsBar } from "./echartType/options";
import columns from "@/components/table/tableConfig/tableColumn/siteStatistics";
import baseTable from "@/components/table/baseTable.vue";
import commonDatePick from '../commonHeader/date.vue';
import getSite from '../commonHeader/getSite.vue';
import getters from "@/store/getters";
import tableToolTip from "@/components/table/tableToolTip.vue";
import { useRouter, useRoute, RouteRecordRaw } from "vue-router";
import { transverterMss } from '@/utils/common';
import { arrayBuffer } from "stream/consumers";
// type flowColumns
interface dataSourceType {
  [propName: string]: any;
}

//getters
const userInfo = getters.userInfo();
//router
const router = useRouter();
//data
const sectionValue = ref(userInfo.siteId);
const getSite_ref = ref(); // 站点组件ref
const showOptionsSelected = ref(1);
const showOptions = ref(
  [
    { label: '浏览量(PV)', value: 1 },
    { label: '访问数(UV)', value: 2 },
    { label: 'IP数', value: 3 },
    { label: '跳出率', value: 4 },
    { label: '平均访问时长', value: 5 },
  ]
);
let commonView = ref({
  today_label: '今日',
  todayAmountStr: '',
  yesterday_label: '昨日',
  yesterdayAmountStr: '',
  high_label: '历史最高',
  allTimeHighAmountStr: '',
  sum_label: '累计',
  cumulativeAmount: ''
})
const pieType = ref<number>(2);
const selectTimeRange = ref([]);  //日期
const commonDatePick_ref = ref(); // 日期组件ref
const listData = ref([
  Object.assign(JSON.parse(JSON.stringify(commonView.value)), { title: '内容发布次数', color: '#DF2F4D', type: 1, }),
  Object.assign(JSON.parse(JSON.stringify(commonView.value)), { title: '微信文章发布数', color: '#1E84E4', type: 2, }),
  Object.assign(JSON.parse(JSON.stringify(commonView.value)), { title: '微博文章发布数', color: '#E7B40E', type: 3, }),
  Object.assign(JSON.parse(JSON.stringify(commonView.value)), { title: '新增评论数', color: '#1EBBBA', type: 4, }),
  Object.assign(JSON.parse(JSON.stringify(commonView.value)), { title: '新建栏目数', color: '#38C060', type: 5, }),
])
const listData_today = ref([
  Object.assign(JSON.parse(JSON.stringify(commonView.value)), { title: '浏览量(PV) ', color: '#DF2F4D', tips: '即通常说的Page View(PV)，用户每打开一个网站页面就被记录1次。用户多次打开同一页面，浏览量值累计。', type: 6, }),
  Object.assign(JSON.parse(JSON.stringify(commonView.value)), { title: '访客数(UV) ', color: '#1E84E4', tips: '一天之内您网站的独立访客数(优先以用户名为依据，匿名用户以Cookie为依据)，一天内同一访客多次访问您网站只计算1个访客。', type: 7, }),
  Object.assign(JSON.parse(JSON.stringify(commonView.value)), { title: 'IP数', color: '#E7B40E', tips: '一天之内您网站的独立访问ip数。', type: 8, }),
  Object.assign(JSON.parse(JSON.stringify(commonView.value)), { title: '跳出率', color: '#1EBBBA', tips: '只浏览了一个页面便离开了网站的访问次数占总的访问次数的百分比。', type: 9, }),
  Object.assign(JSON.parse(JSON.stringify(commonView.value)), { title: '平均访问时长', color: '#38C060', tips: '访客在一次访问中，平均打开网站的时长。即每次访问中，打开第一个页面到关闭最后一个页面的平均值，打开一个页面时计算打开关闭的时间差。', type: 10, noSum: true }),
])
const activeKey = ref('1');
// 图标相关变量
const dataSourcePie = ref(JSON.parse((JSON.stringify(optionsPie))));
const totalView = ref(0);
const dataSourceLine = ref(JSON.parse((JSON.stringify(optionsBar))));
// 趋势图和新老访客
let seleType_label = ref('pvList')
const formData = reactive<dataSourceType>({
  selectTimeOption: 1,
  TimeOptions: [{
    label: '今天',
    value: 1
  }, {
    label: '昨天',
    value: 2
  }, {
    label: '最近7天',
    value: 3
  }, {
    label: '最近30天',
    value: 4
  }],
})
const dataSource_remote = ref<dataSourceType>({});
const tyendencyLine = ref(JSON.parse((JSON.stringify(optionLine))));
tyendencyLine.value.series[0].name = '浏览量';
//新老访问
const visitorObj = ref<dataSourceType>({
  newVisitorsDto: {},
  oldVisitorsDto: {},
});
const newVisitor = ref<dataSourceType>(JSON.parse(JSON.stringify(optionpieHalfDonut)));
const oldVisitor = ref<dataSourceType>(JSON.parse(JSON.stringify(optionpieHalfDonut)));
//表格数据
let configData_visit = reactive<dataSourceType>({ total: 0, size: 10, records: [] });
let configData_entry = reactive<dataSourceType>({ total: 0, size: 10, records: [] });
const isShowPagination = ref(false);
let scroll: dataSourceType = reactive({ y: 260, isFixed: false }); // 表单滚动设置
//地图数据
const configData_area = reactive<dataSourceType>({ total: 0, size: 10, records: [] });
const dataSourceArea = ref<dataSourceType>(JSON.parse(JSON.stringify(optionArea)));
//computed
seleType_label = computed(() => {
  let label = 'pvList'
  showOptionsSelected.value == 1 ? ((label = 'pvList') && (tyendencyLine.value.series[0].name = '浏览量(PV)')) :
    showOptionsSelected.value == 2 ? ((label = 'uvList') && (tyendencyLine.value.series[0].name = '访问数(UV)')) :
      showOptionsSelected.value == 3 ? ((label = 'ipList') && (tyendencyLine.value.series[0].name = 'IP数')) :
        showOptionsSelected.value == 4 ? ((label = 'bounceRateList') && (tyendencyLine.value.series[0].name = '跳出率')) :
          ((label = 'averageVisitLengthList') && (tyendencyLine.value.series[0].name = '平均访问时长'));
  return label
});
//methods
const tendencyChange = () => {
  setData();

}
//获取概况信息
const getSiteInfo = async () => {
  sectionValue.value = getSite_ref.value.sectionValue;
  let data = {
    siteId: sectionValue.value,
  };
  let siteInfo = await request.getSiteInfo(data);
  nextTick(() => {
    siteInfo.forEach((item: dataSourceType) => {
      listData.value.forEach((listData: dataSourceType) => {
        if (item.type == listData.type) {
          listData = Object.assign(listData, item);
        }
      })
      listData_today.value.forEach((listData_today: dataSourceType) => {
        if (item.type == listData_today.type) {
          if (item.type == 9) {
            item.allTimeHighAmountStr = (+item.allTimeHighAmountStr * 100).toFixed(0) + '%';
            item.todayAmountStr = (+item.todayAmountStr * 100).toFixed(0) + '%';
            item.yesterdayAmountStr = (+item.yesterdayAmountStr * 100).toFixed(0) + '%';
          }
          listData_today = Object.assign(listData_today, item);
        }
      })
    });
  })

}
// 获取网站概况饼状图和柱状图数据
const getDataPiEandLine = async () => {
  sectionValue.value = getSite_ref.value.sectionValue;
  //selectTimeRange.value = commonDatePick_ref.value.selectTimeRange;
  let data = {
    siteId: sectionValue.value,
    type: 2,
  };
  let attrPiedata = await request.getGenaralPie(data); // 1-首页 2-栏目页 3-内容页 4-其他页;饼状图
  let types = ['首页', '栏目页', '内容页', '其他页'];
  let attrLinedata: any = '';
  attrLinedata = await request.getGenaralLine(data); // 柱状图联动
  nextTick(async () => {
    totalView.value = 0;
    dataSourcePie.value.series[0].data = attrPiedata.map((item: dataSourceType, _index: number) => {
      item.name = types[item.type - 1];
      totalView.value += item.value;
      return item;
    })

    // attrLinedata = [{name: "下载11122", value: 2}, {name: "图2312片", value: 4}, {name: "新闻", value: 1}]
    dataSourceLine.value.xAxis[0].data = attrLinedata.map((item: { name: any; }) => {
      item.name.length > 4 ? item.name = `${item.name.slice(0, 4)}...` : item.name = item.name
      return item.name
    })
    dataSourceLine.value.series[0].data = attrLinedata.map((item: { value: any; }) => item.value)
    if(activeKey.value != '1') {
      let pie = initEcharts('generalOnlinePie', dataSourcePie.value);
      pie.dispatchAction({ type: 'highlight', dataIndex: 1 });
      pie.on('mouseover', 'series', async function (params: any) {
      pieType.value = params.data.type;

      data.type = params.data.type == 2 || params.data.type == 3 ? params.data.type : data.type;
      [0, 1, 2, 3].forEach((item: any) => {
        pie.dispatchAction({ type: 'downplay', dataIndex: item });
      })

      pie.dispatchAction({ type: 'highlight', dataIndex: params.data.type - 1 });
      attrLinedata = await request.getGenaralLine(data);
      nextTick(() => {
        dataSourceLine.value.series[0].data = attrLinedata;
        console.log(dataSourceLine.value.series.data);

        if (pieType.value == 2 || pieType.value == 3) {
          initEcharts('generalOnline', dataSourceLine.value);
        }
      })
    });
    pie.on('mouseout', function (params: any) {
    });
    //data.type = 3;
    attrLinedata = await request.getGenaralLine(data);
    nextTick(() => {
      dataSourceLine.value.series.data = attrLinedata;
    })

    initEcharts('generalOnline', dataSourceLine.value);
    
    initEcharts('generalOnline', dataSourceLine.value);
    }
    
    
  })
}
// 获取趋势图数据
const getGenaralTendencyLine = async () => {
  selectTimeRange.value = commonDatePick_ref.value.selectTimeRange;
  let data: dataSourceType = {
    siteId: sectionValue.value,
    startTime: selectTimeRange.value[0],
    endTime: selectTimeRange.value[1],
  }
  dataSource_remote.value = await request.getGenaralTendencyLine(data);
  nextTick(() => {
    setData();
  })
}
const setData = () => {
  let res = dataSource_remote.value;
  tyendencyLine.value.series[0].data = res[`${seleType_label.value}`].map((item: dataSourceType) => item.num);
  tyendencyLine.value.xAxis.data = res[`${seleType_label.value}`].map((item: dataSourceType) => item.index);

  initEcharts('tendencyOnline', tyendencyLine.value);
}
const getGenaralnewOldVisitors = async () => {
  selectTimeRange.value = commonDatePick_ref.value.selectTimeRange;
  let data: dataSourceType = {
    siteId: sectionValue.value,
    startTime: selectTimeRange.value[0],
    endTime: selectTimeRange.value[1],
  }
  visitorObj.value = await request.getGenaralnewOldVisitors(data);
  for (let key in visitorObj.value) {
    visitorObj.value[key].percentage = (visitorObj.value[key].percentage * 100).toFixed()
    visitorObj.value[key].bounceRate = (visitorObj.value[key].bounceRate * 100).toFixed()
  }
  nextTick(() => {
    newVisitor.value.series[0].data[0] = { value: visitorObj.value.newVisitorsDto.percentage, name: '新客户' };
    oldVisitor.value.series[0].data[0] = {
      value: visitorObj.value.oldVisitorsDto.percentage, name: '老客户'
    };
    initEcharts('generalnewVisitor', newVisitor.value);
    initEcharts('generaloldVisitor', oldVisitor.value);
    getGenaralArea();
  })

}
const getGenaralArea = async () => {
  selectTimeRange.value = commonDatePick_ref.value.selectTimeRange;
  let data: dataSourceType = {
    siteId: sectionValue.value,
    startTime: selectTimeRange.value[0],
    endTime: selectTimeRange.value[1],
  }
  let areaData = await request.getGenaralArea(data);
  configData_area.records = areaData;
  //configData_area.records = [{ province: "其他", num: 0, percentage: "0" }, { province: "其余地区", num: 0, percentage: "0" }];
  //地图的数据逻辑 等数据接进来可以写
  configData_area.records.forEach((item: any) => {
    let obj =
      { name: item.provinceName, code: item.province, value: item.num }
    dataSourceArea.value.series[1].data.push(obj)
  })
  nextTick(() => {
    initEcharts('area_bar', dataSourceArea.value);
  })
}
const handleChange = () => {
  sectionValue.value = getSite_ref.value.sectionValue;
  selectTimeRange.value = commonDatePick_ref.value.selectTimeRange;
  if (activeKey.value == '2' || activeKey.value == '1') {
    getDataPiEandLine();
  } else {
    
    nextTick(() => {
      getGenaralTendencyLine();
      getGenaralnewOldVisitors();
      getGenaralVisitedEntryPage();
    })
  }
  getSiteInfo();
}

//选择搜索项
const selectType = (item: dataSourceType, type: string) => {
  formData[type] = item.value;
  nextTick(() => {
    getGenaralTendencyLine();
    getGenaralnewOldVisitors();
    getGenaralVisitedEntryPage();
  })
}
const selectTimeChange = (e: any) => {
  selectTimeRange.value = commonDatePick_ref.value.selectTimeRange
  nextTick(() => {
    getGenaralTendencyLine();
    getGenaralnewOldVisitors();
    getGenaralVisitedEntryPage();
  })
}

// 获取top10来源网站
const getGenaralVisitedEntryPage = async () => {
  selectTimeRange.value = commonDatePick_ref.value.selectTimeRange;
  let data: dataSourceType = {
    siteId: sectionValue.value,
    startTime: selectTimeRange.value[0],
    endTime: selectTimeRange.value[1],
  }
  let res = await request.getGenaralVisitedPage(data); // 受访
  let entry = await request.getGenaralentryPage(data); // 入口

  res.forEach((i: any) => { i.percentage = `${(i.percentage * 100).toFixed()}%` })
  entry.forEach((t: any) => { t.percentage = `${(t.percentage * 100).toFixed()}%` })
  nextTick(() => {
    configData_visit.records = res;
    configData_entry.records = entry;
  })
}
const toDetail = (path: string) => {
  router.push(`/siteStatistics/${path}`)
}
//onMounted

onMounted(() => {
  getSiteInfo();
  getGenaralTendencyLine();
  getGenaralnewOldVisitors()
  getGenaralVisitedEntryPage();
});

</script>

<style lang="less" scoped>
.general_statistics {
  width: 100%;
  height: calc(100% - 72px);
  padding: 16px;
  background: #fff;
  overflow: auto;
  box-sizing: border-box;

  .selectSite {
    margin-bottom: 24px;
  }

  .scrollSection {
    overflow: auto;
    max-height: 700px;
  }

  .charts {
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 24px;

    .pv_uvlists {
      display: flex;
      padding: 24px;
      width: 100%;

      .ant-tabs {
        width: 100%;
      }
    }
  }

  .general_statistics_detail {
    .todayAmountStr-box {
      // height: 252px;
      border: 1px solid rgba(232, 232, 232, 1);
      border-radius: 4px;
      box-sizing: border-box;
      padding: 24px;
      margin-bottom: 36px;

      .contribution {
        display: flex;

        .contribution-right {
          margin-top: 30px;
          margin-left: 80px;
        }
      }

      .tabAll {
        display: flex;

        .tabName {
          color: #333333;
          font-size: 18px;
          // height: 30px;
          // line-height: 30px;
          padding-bottom: 3px;
          font-weight: 600;
          margin-right: 30px;
          cursor: pointer;
        }

        .tabShow {
          color: #1EC6DF;
          border-bottom: 2px solid #1EC6DF;
        }
      }

      .jee-popover {
        margin-right: -20px;
      }

      .lookUp {
        fill: #FF0000;
        color: #FF0000;
        font-size: 10px;
      }

      .downUp {
        font-size: 10px;
        fill: #12C45D;
        color: #12C45D;
      }

      h3 {
        color: #333333;
        font-size: 18px;
        height: 30px;
        line-height: 30px;
      }

      .todayAmountStr-content {
        // padding: 9px;
        display: flex;
        justify-content: space-between;

        .last-toady {
          li {
            padding-right: 0;
          }
        }

        ul {
          flex: 6;
          margin-left: 29px;
          font-size: 14px;

          li:first-child {
            text-align: right;
            display: block;
            border-right: none;
            font-size: 16px;
            color: #333333;
            position: relative;
            padding-bottom: 24px;
            padding-top: 16px;

            .jee-popover {
              margin-left: 16px;
              right: 0;
              margin-right: 0;
            }
          }

          li:nth-child(2) {
            padding-top: 0;
          }

          li:last-child {
            padding-bottom: 0;
          }

          li {
            line-height: 12px;
            display: flex;
            padding: 15px 0;
            justify-content: space-between;
            border-right: 1px dashed rgba(232, 232, 232, 1);
            padding-right: 29px;
            color: #666666;

            span:last-child {
              font-size: 18px;
              color: #999999;
            }
          }

          li:nth-child(3) {
            span:last-child {
              color: #333333;
            }
          }

          li:nth-child(2) {
            span:last-child {
              font-size: 24px;
            }
          }

          .yesterdayAmountStr-wrap {
            position: relative;

            .jee-svg-icon {
              position: absolute;
              right: -18px;
              top: 15px;
            }
          }
        }

        ul:last-child {
          li {
            border-right: none;
          }
        }
      }
    }

    .listData_today {
      border: none;
      padding: 0 24px;
    }
  }

  .generalOnlinePie_line {
    display: flex;

    #generalOnlinePie {
      width: 380px;
      height: 300px;
    }

    #generalOnline {
      flex: 1;
      height: 380px;
      margin-bottom: 12px;
    }

    .totalView {
      text-align: center;
      color: #666;
      font-size: 14px;

      span {
        font-size: 20px;
        color: #333;
      }
    }
  }

  .general_tendency_visitors {
    display: flex;
    justify-content: space-between;
    padding-bottom: 24px;
  }

  .charts_tendency_visitors {
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 500px;
    margin-bottom: 24px;

    .charts_tendency {
      border: 1px solid #e8e8e8;
      border-radius: 4px;
      margin-right: 24px;
      flex: 1;
      padding: 24px;
      position: relative;

      .tendency_statistics_title {
        font-size: 18px;
        color: #333;
        font-weight: 700;
        margin-bottom: 16px;
      }

      #tendencyOnline {
        height: 400px;
      }
    }



    .charts_visitors {
      border: 1px solid #e8e8e8;
      border-radius: 4px;
      width: 600px;
      padding: 24px;
      position: relative;

      .newOldvisiter {
        display: flex;
        font-size: 18px;
        color: #333;
        font-weight: 700;
        margin-bottom: 16px;

      }

      #generalnewVisitor {
        width: 260px;
        height: 260px;
        display: inline-block;
        margin-right: 24px;
        position: relative;

        &::after {
          content: '';
          position: absolute;
          width: 0;
          height: 430px;
          border-right: 1px dashed #e8e8e8;
          top: -24px;
          right: -16px;
        }
      }

      #generaloldVisitor {
        width: 260px;
        height: 260px;
        display: inline-block;
      }


      .visitor-wrap {
        display: flex;
        justify-content: space-between;
      }

      .visitor {
        display: flex;
        justify-content: center;
        width: calc(50% + 10px);
      }

      .visitor-box {
        width: 250px;

        &:last-of-type {
          width: 350px;
        }

        &+.visitor-box {
          padding-left: 30px;
        }

        p {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-right: 20px;
          line-height: 36px;

          strong {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-right: 10px;
            line-height: 45px;
          }

          span:nth-of-type(2) {
            font-size: 18px;
            font-weight: 600px;
          }
        }

      }

      .visitor-box:last-child {
        p:nth-child(1) {
          strong {
            background-color: #1EBBBA;
          }
        }

        p:nth-child(2) {
          strong {
            background-color: #38C060;
          }
        }

        p:nth-child(3) {
          strong {
            background-color: #9669DF;
          }
        }

        p:nth-child(4) {
          strong {
            background-color: #F9CB34;
          }
        }
      }
    }
  }

  .top10 {
    display: flex;
    justify-content: space-between;
    max-height: 400px;


    .visitor10,
    .entery10 {
      border: 1px solid #e8e8e8;
      border-radius: 4px;
      width: calc(50% - 12px);
      padding: 24px;
      position: relative;
    }

    .visitor10 {
      margin-right: 24px;

    }
  }

  .sourceUrl {
    cursor: pointer;
    color: #1F6DED;
  }

  .more {
    top: 24px;
    right: 24px;
    font-size: 14px;
    position: absolute;
  }

  .top_title {
    font-size: 18px;
    color: #333;
    font-weight: 700;
    margin-bottom: 24px;
  }

  .areaOnlinePie_line {
    display: flex;
    margin-top: 24px;
    padding: 24px;
    height: 384px;
    border-radius: 4px;
    border: 1px solid #e8e8e8;

    .area_bar {
      width: calc(50% - 12px);
    }

    #area_bar {
      width: 100%;
      height: 300px;
    }

    .statictics_table {
      flex: 1;
      padding-left: 24px;
    }
  }
}
</style>
<style lang="scss">
.general_statistics_detail {


  .options {
    display: flex;
    align-items: center;
    font-size: 14px;

    .options_label {
      margin-right: 12px;
    }

    .options_content {
      margin-right: 12px;
      border: 1px solid var(--theme_button_bg_color, #1F6DED);
      display: flex;
      border-radius: 4px;

      span {
        padding: 4px 14px;
        color: #333;
        border-right: 1px solid var(--theme_button_bg_color, #1F6DED);
      }

      span:nth-last-of-type(1) {
        border-right: none;
      }

      span:hover {
        background: var(--theme_button_hover_bg_color, #4892fa);
        border-color: var(--theme_button_hover_bg_color, #4892fa);
        color: #fff;
      }

      .activeOption {
        color: #fff;
        background: var(--theme_button_bg_color, #1F6DED);
      }
    }
  }
}

.general_statistics_charts {
  .ant-table-column-sorters {
    max-width: 100px;
  }
}

.ant-table-thead .ant-table-cell:nth-last-of-type(1) {
  text-align: left;
}

.options_content {
  span {
    cursor: pointer;
  }
}
</style>